<template>
  <div>

    <el-card>
      <el-row style="text-align: left;font-size: 24px;">我的订单</el-row>
      <el-row>


        <el-table :data="orders"
          style="color:black;"
                  :header-cell-style="{'background-color':'#eeeeee','border-bottom':'1px solid lightgray'}"
                  border
        >
          <el-table-column label="订单详情" width="200" type="expand">
            <template slot-scope="scope">
              <div >
                <el-table :data="scope.row.items"
                          style="font-size: 12px;background-color:#eeeeee;"

                          :show-header="false"
                >
                  <el-table-column label="商品图片" width="100">
                    <template slot-scope="itemScope">
                      <el-image :src="imageServer+'/'+itemScope.row.icon"></el-image>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名称" prop="name">

                  </el-table-column>
                  <el-table-column label="商品单价" width="200">
                    <template slot-scope="itemScope">
                      <span>价格: ¥{{(itemScope.row.price/100).toFixed(2)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="购买数量" width="100" prop="count"></el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" width="280" prop="code"></el-table-column>
          <el-table-column label="订单金额" width="100">
            <template slot-scope="scope">
              <span>¥{{(scope.row.orderMoney/100).toFixed(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="100">
            <template slot-scope="scope">
              <span style="font-weight: bolder;">{{OrderStatus[scope.row.status]}}</span>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" width="200">
            <template slot-scope="scope">
              {{scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column label="收货地址">
            <template slot-scope="scope">
              <span>{{scope.row.shippingUser}}( 电话: {{scope.row.shippingPhone}} ) {{scope.row.province+scope.row.city+scope.row.district+scope.row.address}}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.status==0"
                   @click="handleGoPay(scope.row.id)"
                   style="width:60px;
              text-align: center;border-radius: 2px;
              background-color:rgb(205,65,60);color: white;font-size: 14px;font-weight: bolder;cursor: pointer;">
                去支付
              </div>
            </template>
          </el-table-column>
        </el-table>


       </el-row>
    </el-card>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import { OrderStatus} from '../../config/variable'
  export default {
    name: "Order",
    data() {
      return {
        OrderStatus: OrderStatus
      }
    },

    computed: {
      ...mapState({
        user: state => state.auth.user,
        imageServer: state=>state.prod.imageServer,
        orders: state=>state.auth.orders
      })
    },

    created() {
      this.api.__api__Orders(this.user.id)
        .then(data => {
          this.$store.commit('setOrders', data.data );
        }).catch(error => null)
    },

    methods:{
      handleGoPay(id){
        this.$router.push({
          path:`/payment/${id}`
        })

      }
    }
  }
</script>

<style scoped>

</style>
